<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <div class="center-title">
          <span>{{ title }}</span>
        </div>
        <div class="dir">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dir }}</div>
        <el-card v-loading="loading" element-loading-text="Loading..." element-loading-background="#178af01a">
          <div v-for="(el, index) in tableData" :key="el.title" class="tableItem" @click="onClickRow(el)">
            <div class="content">
              <div class="top">
                <div class="circle"></div>
                <div class="title">{{ el.title }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.visible" class="customDialog" :title="dialog.title" width="500px">
      <el-form ref="demoFormRef" class="queryForm" :model="form" label-width="100px">
        <!-- readonly="readonly" -->
        <!-- <el-form-item label="租户编号" prop="tenantId">
          <el-input v-model="form.tenantId" />
        </el-form-item> -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="发布时间" prop="fbsj">
          <el-input v-model="form.fbsj" />
        </el-form-item>
        <el-form-item label="文化内容" prop="content">
          <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="所属村" prop="ssc">
          <el-input v-model="form.ssc" />
        </el-form-item>
        <el-form-item label="所属乡镇" prop="ssxz">
          <el-input v-model="form.ssxz" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
        <el-form-item label="图片" prop="ssxz">
          <imageUpload v-model="form.file" :isShowTip="false" :disabled="true" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getXcwhList } from '@/views/hbwlpc/hooks/mixinsMenus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const props = defineProps({
  path: {
    type: String,
    default: ''
  },
  lmId: {
    type: String,
    default: ''
  }
});
const demoFormRef = ref<ElFormInstance>();
const initFormData = {
  id: undefined,
  tenantId: undefined,
  title: undefined,
  fbsj: undefined,
  content: undefined,
  tp: undefined,
  ssc: undefined,
  ssxz: undefined,
  remark: undefined,
  file: undefined
};
const data = reactive({
  form: { ...initFormData }
});
const { form } = toRefs(data);
const dialog = reactive<DialogOption>({
  visible: false,
  title: '详情信息'
});
const reset = () => {
  form.value = { ...initFormData };
  demoFormRef.value?.resetFields();
};
const loading = ref(false);
const title = ref('');
const dir = ref('');
const queryParams = ref({
  pageNum: 1,
  pageSize: 20
});

const onClickRow = async (el) => {
  reset();
  const _id = el?.id;
  const res = await $szxcapi.infoQuery({ id: _id });
  Object.assign(form.value, res.data);
  dialog.visible = true;
};
const tableData = ref([]);
const init = async () => {
  loading.value = true;
  const data = await getXcwhList(props, queryParams.value);
  console.log('data', data);
  tableData.value = data.rows || [];
  // queryParams.value.total = data.total;
  loading.value = false;
};
onMounted(async () => {
  await nextTick();
  init();
});
watch(
  () => props.lmId,
  (value) => {
    init();
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => props.path,
  (val) => {
    if (val == '/mfjx') {
      title.value = '民风家训';
      dir.value =
        '张家口村绝大多数村民自汉唐以来或明朝洪武年间至清康熙年间自陕西、江西、湖南等地迁徙至此，距21世纪初近年有 300-600 年历史，多元文化融合，也形成独特的村风、民俗的独特个性。有易氏、张氏、陈氏、刘氏、王氏、郭氏等大宗族的宗训家风来规约着村民的行为和作风。';
    } else {
      title.value = '民俗文化';
      dir.value =
        '张家口村是一个文化渊源流长的村。民间文化活动历史悠久，活动内容丰富多彩，演出形式多种多样。民间文化活动主要有龙灯、舞狮、采莲船、地花鼓、连湘舞、皮影戏、猜谜语、讲故事、说笑话，打击乐等。';
    }
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  color: white;
  overflow: hidden;
  .center-title {
    width: 260px;
    height: 110px;
    background: url('@/assets/szxc/wh.png') no-repeat 0 0/100% 100%;
    font-weight: 700;
    font-size: 24px;
    color: white;
    position: absolute;
    top: -30px;
    left: -24px;
    span {
      position: absolute;
      top: 38%;
      left: 46%;
    }
  }
  .dir {
    margin-top: 44px;
    font-size: 18px;
    // background: url('@/assets/szxc/bk.png') no-repeat 0 0/100% 100%;
  }
  .el-card {
    max-height: calc(90vh - 111px) !important;
    overflow: hidden auto;
    background: #178af01a;
    border: none;
  }
  .circle {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: linear-gradient(0deg, #4ab1ff, #ffffff);
    border-radius: 2px;
    margin-right: 10px;
  }
  .tableItem {
    margin-bottom: 10px;
    cursor: pointer;
    color: white;
    border-bottom: 1px solid rgba(74, 177, 255, 0.2);

    .content {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .top {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
